<!-- 秒杀列表 -->
<template>
	<view class="page_box order-detail-wrap">
		<!-- dianpu  -->
		<!--    <view class="content_box">-->
		<!--      <button class="seckill-btn" v-if="is_new"  @click="isdisableds?clickyouhuiquan():toshouye()">立即核销</button>-->
		<!--      <button class="seckill-btn btn-disabled" v-else @click="toshouye()">不符合领取条件(点击跳转首页)</button>-->
		<!--    </view>-->

		<view class="order-wrap">
			<!-- 商品信息 -->
			<view style="padding: 10px;border-bottom: 1px solid #F3F3F3;display: flex;">
				<view style="position: relative;">
					<image :src="'https://oss.bigchun.com' + orderDetail.goods.image"
						style="width: 260rpx;height: 194rpx;border-radius: 8rpx;"></image>
				</view>
				<view>
					<view style="margin-left: 10px;">
						<view style="font-size: 32rpx;font-family: PingFang SC-Bold, PingFang SC;font-weight: bold;color: #ffffff;line-height: 50rpx;    white-space: nowrap;
				overflow: hidden;width: 400rpx;text-overflow: ellipsis;">{{orderDetail.goods.title}}
							<text>：{{orderDetail.amount}}</text>
						</view>
						<view
							style="font-size: 20rpx;line-height: 60rpx;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #999999;margin-top: 4px;">
							{{orderDetail.goods.subtitle}}
						</view>
					</view>
				</view>
			</view>

			<!-- 价格信息 -->
			<view class="order-row-box order-price-box" v-if="orderDetail.id">
				<view class="item">
					<text class="title">商品总价</text>
					<text class="detail">￥{{ orderDetail.amount }}</text>
				</view>
				<view class="item">
					<text class="title">实际支付：</text>
					<text class="detail price">￥{{ orderDetail.cash_money }}</text>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order-row-box">
				<view class="item">
					<text class="title">订单编号：</text>
					<text class="detail order_sn" @tap="onCopy(orderDetail.order_sn)">{{ orderDetail.order_sn }}</text>
				</view>
				<view class="item">
					<text class="title">下单时间：</text>
					<text class="detail create_time">{{ orderDetail.createtime }}</text>
				</view>
			</view>
		</view>


		<!-- 底部按钮 -->
		<view class="foot-wrap safe-area-inset-bottom">
			<button @tap.stop="clickyouhuiquan(orderDetail.id)" v-if="orderDetail.status !== 2"
				class="u-reset-button obtn obtn3">核销</button>
			<button v-if="orderDetail.status === 2" class="u-reset-button obtn">已核销</button>
		</view>
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
			cancel-color="#666666" @confirm="gohexiao" content="确定核销？"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				storeShopId: '',
				isdisableds: true,
				orderDetail: {},
				showModal: false
			};
		},
		onLoad(options) {
			if (options) {
				this.storeShopId = options.order_id;
				this.getOrderDetail();
			}
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		methods: {
			//顶部商品列表
			getOrderDetail() {
				let that = this;
				that.$http_business(
					'common.cate_detail', {
						order_id: that.storeShopId
					},
					'加载中...'
				).then(res => {
					if (res.code === 1) {
						console.log("========this.order", res.data)
						that.orderDetail = res.data;
					} else {
						that.$u.toast(res.msg);
					}
				});
			},
			clickyouhuiquan(id) {
				let that = this;
				that.showModal = true;
			},
			gohexiao() {
				let that = this;
				that.$http_business(
					'common.order_confirm', {
						token: uni.getStorageSync("token"),
						order_id: that.storeShopId,
					},
					'核销中...'
				).then(res => {
					if (res.code === 1) {
						that.$u.toast(res.msg);
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/index/user`,
							})
						}, 2000)

					} else {
						that.$u.toast(res.msg);
					}
				});
			}
		}
	};
</script>


<style>
	page {
		background: #13114c;
	}
</style>
<style lang="scss">
	.address-wrap {
		background-color: #13114c;
		padding: 20rpx;
		margin: 20rpx 24rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			.address-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ico {}

				.intro {
					margin-left: 20rpx;

					.address-user {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #ffffff;
						line-height: 44rpx;
						padding-bottom: 16rpx;

						.address-username {}

						.address-phone {
							margin-left: 20rpx;
						}
					}

					.address-detail {
						width: 522rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 32rpx;
						padding-bottom: 16rpx;
					}
				}
			}
		}

		.right {}
	}

	.order-wrap {
		background-color: #13114c;
		padding: 40rpx 20rpx;
		margin: 20rpx 24rpx;
		border-radius: 16rpx;

		.order-list {
			.order-card {
				padding: 0 20rpx;
				margin-bottom: 8rpx;
				display: flex;

				.goods_img {
					width: 200rpx;
					height: 150rpx;
					border-radius: 16rpx;
					margin-right: 20rpx;
				}

				.goods-intro {
					flex-grow: 1;

					.row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.goods-title {
							font-weight: 500;
							color: #ffffff;
							font-size: 32rpx;
							width: 258rpx;
						}

						.goods-price {
							font-weight: bold;
							color: #ffffff;
							font-size: 28rpx;
						}

						.goods_sku,
						.goods-num {
							font-weight: 400;
							color: #777777;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.order-row-box {
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 28rpx;
				color: #ffffff;

				.title {
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
				}

				.detail {
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
				}

				.price {
					color: #e9c83ce8;
				}

				.order_sn,
				.create_time {
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.order-price-box {
			border-bottom: 1rpx solid #F3F3F3;
			padding: 20rpx 0;
		}
	}

	.foot-wrap {
		width: 100%;
		height: 100rpx;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		button {
			margin: 0 20rpx 0 0;
			padding: 0;
		}

		.obtn {
			width: 80%;
			height: 64rpx;
			line-height: 64rpx;
			background: #13114c;
			border-radius: 108rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			border: 1rpx solid #999999;
		}

		.obtn3 {
			color: #e9c83ce8;
			border: 1rpx solid #e9c83ce8;
		}
	}


	// 配送方式
	.express-type-box {
		height: 90rpx;
		background: rgba(247, 247, 247, 1);
		border-radius: 10rpx;
		padding: 0 20rpx;

		.express-type--title {
			font-size: 28rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.express-type--content {
			font-size: 26rpx;

			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.express-type--detail {
			font-size: 24rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 30rpx;
		}
	}

	.refund_msg {
		font-size: 28rpx;
		color: #999;
		flex: 1;
		text-align: left;
	}

	.order-bottom {
		background: #fff;
		justify-content: center;
		padding: 20rpx 0;

		.btn1 {
			width: 80%;
			line-height: 64rpx;
			border: 1rpx solid rgba(223, 223, 223, 1);
			border-radius: 108rpx;
			font-size: 28rpx;
			background: #fff;
			padding: 0;
			margin-left: 20rpx;
		}

		.btn2 {
			width: 80%;
			line-height: 64rpx;
			border: 1rpx solid #e9c83ce8 !important;
			border-radius: 108rpx;
			font-size: 28rpx;
			color: #e9c83ce8 !important;
			padding: 0;
			background: #fff;
			margin-left: 20rpx;
		}
	}
</style>